
import 'package:flutter/material.dart';

class ConstrainedBoxPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Constrained Box"),
        actions: <Widget>[
          /// 因为AppBar中已经指定了actions按钮的限制条件，所以我们要自定义loading按钮大小，
          /// 就必须通过UnconstrainedBox来“去除”父元素的限制
          UnconstrainedBox(
            child: SizedBox(
              width: 20,
              height: 20,
              child: CircularProgressIndicator(
                strokeWidth: 3,
                valueColor: AlwaysStoppedAnimation(
                  Colors.white70 
                ),
              ),
            ),
          )
        ],
      ),
      body: ConstrainedBox(
        /// 最小高度为50，宽度尽可能大的红色容器
        constraints: BoxConstraints(
          minWidth: double.infinity,
          minHeight: 50
        ),
        child: Container(
          height: 50,
          child: DecoratedBox(
            decoration: BoxDecoration(
              color: Colors.red
            ),
          ),
        ),
      ),
    );
  }
}


/// 实际上SizedBox只是ConstrainedBox的一个定制，上面代码等价于：
/// 
/// ConstrainedBox(
///   constraints: BoxConstraints.tightFor(width: 80.0,height: 80.0),
///   child: redBox, 
/// )
/// 
/// 而BoxConstraints.tightFor(width: 80.0,height: 80.0)等价于：
/// 
/// BoxConstraints(minHeight: 80.0,maxHeight: 80.0,minWidth: 80.0,maxWidth: 80.0)
/// 
/// 
/// 而实际上ConstrainedBox和SizedBox都是通过RenderConstrainedBox来渲染的，我们可以看到
/// ConstrainedBox和SizedBox的createRenderObject()方法都返回的是一个RenderConstrainedBox对象：
/// 
/// @override
/// RenderConstrainedBox createRenderObject(BuildContext context) {
///   return new RenderConstrainedBox(
///     additionalConstraints: ...,
///   );
/// }